<template>
    <h3>订单列表</h3>
    <el-table :data="orderData" style="width: 100%">
        <el-table-column prop="tel" label="电话" width="50" />
        <el-table-column prop="addressDetail" label="详细地址" width="50" />
        <el-table-column prop="orderid" label="订单ID" />
        <el-table-column prop="userid" label="用户ID" />
        <el-table-column label="订单状态">
            <template #default="scope">
                <el-select v-model="scope.row.status" class="m-2" :disabled="crud.charAt(2) != '1'"
                    @change="changeOrderStatus(scope.row.orderid, scope.row.status)">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </template>
        </el-table-column>
        <el-table-column prop="proname" label="商品名称" />
        <el-table-column prop="proid" label="商品ID" />
        <el-table-column prop="originprice" label="原价" width="30" />
        <el-table-column prop="discount" label="折扣" width="20" />
        <el-table-column prop="num" label="数量" width="20" />
        <el-table-column label="图片">
            <template #default="scope">
                <img class="img" :src="scope.row.img1" alt="商品图片">
            </template>
        </el-table-column>
        <el-table-column prop="time" label="购买时间" />
    </el-table>
</template>
<script setup lang="ts">
import { AxiosResponse } from 'axios';
import { reactive } from 'vue';
import service from '../../../utils/service';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from "vue-router"
const $route = useRoute()
const crud = $route.meta.crud as string
console.log(crud);

interface IOrder {
    "name": string,
    "tel": string,
    "province": string,
    "city": string,
    "county": string,
    "addressDetail": string,
    "orderid": string,
    "userid": string,
    "status": number,
    "proname": string,
    "proid": string,
    "originprice": number,
    "img1": string,
    "discount": number,
    "num": number,
    "time": string
}
const orderData = reactive<IOrder[]>([{
    "name": "",
    "tel": "",
    "province": "",
    "city": "",
    "county": "",
    "addressDetail": "",
    "orderid": "order_81966149-977b-4943-b80f-1373cf644b16",
    "userid": "user_6c8604a1-f5bc-4b34-943a-98e746947a8b",
    "status": 0,
    "proname": "杨幂Crocs老爹鞋女卡骆驰洞洞鞋休闲鞋沙滩鞋2020新品复古克骆格BAE凉鞋/206302 白色-100 36/37(230mm)",
    "proid": "pro_7c7a51ed-02fa-4102-b6fe-380cc7470274",
    "originprice": 599,
    "img1": "https://img13.360buyimg.com/n1/jfs/t1/96389/37/17855/171924/5e8da539E5a44f107/635ddd8ab7c8078d.jpg",
    "discount": 8,
    "num": 1,
    "time": "1672833312153"
}])

const getOrderData = () => {
    service({
        url: `/order/list`,
    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {

            orderData.length = 0
            orderData.push(...res.data.data)
        }
    })
}
// getOrderData()

// 下拉框
const options = reactive<{
    value: number,
    label: string
}[]>([
    {
        value: 0,
        label: "未支付"
    },
    {
        value: 1,
        label: "待发货"
    },
    {
        value: 2,
        label: "待收货"
    },
    {
        value: 3,
        label: "待评价"
    },
    {
        value: 4,
        label: "已完成"
    },
])
// 修改订单状态
const changeOrderStatus = (orderid: string, status: number) => {
    ElMessageBox.confirm(
        '亲,你确定要修改该订单状态嘛???',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            service({
                url: `/order/updateStatus`,
                params: {
                    orderid,
                    status
                }
            }).then((res: AxiosResponse) => {
                if (res.data.code === "200") {
                    ElMessage({
                        type: 'success',
                        message: '修改成功',
                    })
                }
                // getOrderData()
            })
        })
        .catch(() => {


            // getOrderData()
            ElMessage({
                type: 'info',
                message: '取消修改',
            })

        })
}

</script>

<style scoped>
h3 {
    margin-bottom: 10px;
}

.img {
    width: 100%;
    height: 100%;
}
</style>